<template>
  <div class="electrical-equipment">
    <div class="list-tip">
      <svg-icon icon-class="tip-icon" className="list-tip__icon" />
      带 “
      <svg-icon icon-class="ruler-active" size="12" />
      ” 的家电一般需要提前确认好类型尺寸，特别是嵌入式家电。
    </div>
    <div class="list">
      <VueDraggableNext v-model="flowStore.equipmentList" group="from" handle=".sort" animation="300">
        <div class="list-item" v-for="(item, index) in flowStore.equipmentList" :key="item.value">
          <div class="list-item__input">
            <svg-icon icon-class="drag" class="sort" />
            <el-input
              placeholder="家用电器类别名称"
              clearable
              v-model.trim="item.label"
              @input="changeEquipmentName($event, item)"
            />
          </div>
          <div class="list-item__operate">
            <svg-icon icon-class="ruler-active" v-if="item.isNeedRuler" @click="handelSetNeedRuler(item)" />
            <svg-icon icon-class="ruler" v-else @click="handelSetNeedRuler(item)" />
            <svg-icon icon-class="del-icon" v-if="isOnlyOne" @click="handelDelEquipment(item, index)" />
          </div>
        </div>
      </VueDraggableNext>
      <div class="list-item list-add" @click="handelAddEquipment">
        <el-icon color="#007DFF"><CirclePlusFilled /></el-icon>
        <span>添加家用电器</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, getCurrentInstance } from "vue";
import { CirclePlusFilled } from "@element-plus/icons-vue";
import { debounce } from "lodash";
import { getId } from "@/utils/index.js";
import useFlowStore from "@/store/modules/gkflow.js";
import { VueDraggableNext } from "vue-draggable-next";

const { proxy } = getCurrentInstance();
const flowStore = useFlowStore();

const isOnlyOne = computed(() => {
  return flowStore.equipmentList?.length !== 1;
});
const isSameName = target => {
  const sameNames = flowStore.equipmentList?.filter(item => item.title === target) || [];
  return sameNames?.length > 1;
};
const changeEquipmentName = debounce(e => {
  if (isSameName(e)) {
    return proxy.$modal.msgError("家用电器类别名称不允许重复");
  }
}, 500);
const handelAddEquipment = () => {
  flowStore.equipmentList.push({
    label: "",
    value: getId(),
    isNeedRuler: false
  });
};
const handelSetNeedRuler = item => {
  item.isNeedRuler = !item.isNeedRuler;
};
const handelDelEquipment = (item, index) => {
  if (flowStore.equipmentList?.length === 1) {
    return proxy.$modal.msgError("至少需要一个家用电器类别");
  }
  flowStore.equipmentList?.splice(index, 1);
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/mixin.scss";
.electrical-equipment {
  @include flex-column;
  width: 100%;
  padding: 20px;
  .list-tip {
    @include flex-align;
    margin-bottom: 20px;
    font-size: 12px;
    color: #86909c;
    line-height: 24px;
    &__icon {
      margin-right: 5px;
    }
  }
  .list {
    flex: 1px;
    overflow-y: auto;
    &-item {
      @include flex-align;
      padding: 6px 22px;
      box-sizing: border-box;
      border: 1px solid #dcdfe6;
      background-color: #f5f7fa;
      & + .list-item {
        margin-top: 10px;
      }
      &__input {
        @include flex-align;
        flex: 1;
      }
      &__operate {
        @include flex-align;
        cursor: pointer;
        :deep(.svg-icon) {
          margin-left: 20px;
        }
      }
      :deep(.el-input__wrapper) {
        box-shadow: none;
      }
    }
    &-add {
      @include flex-align;
      padding: 11px 16px;
      margin-top: 10px;
      cursor: pointer;
      font-size: 12px;
      color: #007dff;
      line-height: 22px;
      background-color: #fff;
      :deep(.el-icon) {
        margin-right: 10px;
      }
    }
  }
}
</style>
